创建基于Webpack的Vue.js项目 |
您所在的位置:网站首页 › webpack 升级 › 创建基于Webpack的Vue.js项目 |
创建基于Webpack的Vue.js项目
本文目录: 一、Webpack简介 二、创建基于Webpack的Vue.js项目 1、前提条件 (1)、检查node 和npm版本信息 (2)、升级你的 Node 版本 2、安装Webpack、Vue.js (1)、安装Webpack (2)、安装Vue.js 3、创建基于Webpack的Vue.js项目 三、Webpack下的Vue.js项目文件结构 四、打开Vue项目管理器 一、Webpack简介Webpack是一个打包工具,可以把JS、CSS、Node Module、Coffeescrip、SCSS/LESS、图片等都打包在一起,因此,现在几乎所有的SPA项目、JS项目都会用到Webpack。 其官方网站为:https://webpack.js.org/, GitHub为https://github.com/webpack/ webpack。 Webpack的功能非常强大,对各种技术都提供了支持,仿佛是一个“万能胶水”,把所有的技术都黏合(集成)到了一起。 二、创建基于Webpack的Vue.js项目Webpack+Vue.js的方式来做项目的,这样才可以做到“视图”“路由”“component”等的分离,以及快速打包、部署及项目上线。 1、前提条件 熟悉命令行需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本 (1)、检查node 和npm版本信息同时按window+R键,输入cmd,打开命令提示符窗口 输入: node –v (查看本机安装的node版本) 输入: npm –v (查看本机安装的npm版本) 如果提示没有安装node或Node.js 版本 较低,请升级你的 Node 版本。 详细教程可参阅下面链接文章: Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细)![]() npm install表示安装某个node package(包) -g表示这个包安装后可以被全局使用 当确定安装好 node.js 后,重新打开 cmd 命令窗口输入: (1)、安装WebpackWebpack的安装命令如下: npm install --save-dev webpack或npm install webpack -g查看webpack的版本 npm webpack -v需要同时安装Vue和vue-cli这两个Node package。 运行下面的命令: npm install vue -g (或:cnpm install vue -g)npm install @vue/cli –g或npm install -g @vue/cli@版本号 vue@版本号或: 验证安装是否成功 npm list vuenpm list vue -g运行后,如果看到下面的消息,就说明安装成功: 创建基于Webpack的Vue.js项目,最好在cd进入到某盘的某个位置,即项目的路径,否则项目会新建在C:\Users\Administrator\,也可以直接在想要的项目路径下输入cmd。 例如我在C:\00program\vue\vuelearn,建立项目名:vue3webpack 我们运行以下命令: vue create vue3webpack (将vue3webpack替换成你的项目名)之后,会进入到交互模式: Vue CLI v5.0.8 ? Please pick a preset: (Use arrow keys) > Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select featuresVue CLI v5.0.8 Please pick a preset: (Use arrow keys)------》请选择预设:(使用箭头键)Default ([Vue 2] babel, eslint)------》默认 ([Vue 2] babel, eslint)Default (Vue 3) ([Vue 3] babel, eslint)------》默认 (Vue 3) ([Vue 3] babel, eslint)> Manually select features------》> 手动选择功能我们选择最下面的Manually select features,然后按回车键,会出现选项,然后选择本项目中需要的特性,如下: Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and to proceed) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E TestingVue CLI v5.0.8 Please pick a preset: Manually select features------》请选择一个预设:手动选择功能 Check the features needed for your project:(Press to select, to toggle all, to invert selection, and to proceed)------》检查项目所需的功能:(按下可选择、 切换全部、 反转选择和 继续) (*) Babel------》 Babel(*) TypeScript------》支持TypeScript( ) Progressive Web App (PWA) Support------》渐进式 Web 应用程序 (PWA) 支持(*) Router ------》路由器(*) Vuex------》Vuex( ) CSS Pre-processors ------》CSS 预处理器( ) Linter / Formatter ------》Linter/格式化程序(*) Unit Testing------》单元测试( ) E2E Testing------》E2E 测试根据上面的提示,我们在第一个(Babel),第二个(TypeScript),第四个(Router),第五个(Vuex)和第八个(Unit Testing)前面按空格键,表示选中,然后按回车键。接下来会出现版本选择,如下: Choose a version of Vue.js that you want to start the project with------》选择一个 Vue.js 版本,你想用它来启动项目 > 3.x2.x选择3.x之后,按回车键,出现下面的提示: Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, Linter, Unit ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? (y/N)Use class-style component syntax? (y/N)------》使用类样式的组件语法?(是/否) 我们直接按回车键,表示选择默认的 No 出现下面的提示: Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)------》将 Babel 与 TypeScript 一起使用(modern 模式、自动检测的 polyfill、转译 JSX 需要)?(是/否) 我们直接按回车键,表示选择默认的 Yes 出现下面的提示: Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, Linter, Unit ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) ------》询问我们是否对路由使用history模式(是/否) 我们直接按回车键,表示选择默认的Yes, 接下来会看到下面的提示, Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier? Pick a linter / formatter config: (Use arrow keys)------》选择一个 linter /格式化程序配置:(使用箭头键) > ESLint with error prevention only------》仅具有错误预防功能的 ESLint ESLint + Airbnb config------》ESLint + Airbnb配置 ESLint + Standard config------》ESLint + 标准配置 ESLint + Prettier------》ESLint + Prettier 我们在原来的位置上直接按回车键,表示选择默认的 Basic, 回车后会让你选择增加lint的特性功能。(按下可选择、 切换全部、 反转选择和继续) ? Pick additional lint features: (Press to select, to toggle all, to invert selection, and to proceed) >(*) Lint on save ( ) Lint and fix on commit我们在原来的位置上直接按回车键,表示选择默认的 Lint on save, 接下来会看到下面的提示, ? Pick a unit testing solution: (Use arrow keys) > Jest Mocha + Chai让我们选择单元测试框架,如下: Pick a unit testing solution:------》选择一个单元测试解决方案: JestMocha + Chai这里选择Jest即可。 接下来会看到下面的提示, ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.jsonWhere do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)------》你更喜欢在哪里放置 Babel、ESLint 等的配置?(使用箭头键) In dedicated config files ------》每项配置有单独的文件In package.json------》在package.json 文件中选择这些配置文件时单独存放,还是直接存放在package.json文件里。 这里选择放在单独的文件里(In dedicated config files)。 Save this as a preset for future projects? (y/N)Save this as a preset for future projects? (y/N)------》将其保存为未来项目的预设?(是/否) 这时按回车键默认No。(也可以选择保存,以方便下次使用) 至此,输入的条件结束,vue-cli会开始创建新项目的工作,在控制台上会打印如下内容: 至此,一个基于Vue3+Webpack,并且带有单元测试功能的项目就创建好了。 我们进入到该项目中,使其在本地以默认端口来运行: cd vue3webpacknpm run serve然后就可以看到在本地已经运行起来了: DONE Compiled successfully in 3428ms 01:26:27 App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.5:8080/ Note that the development build is not optimized. To create a production build, run npm run build. No issues found.App running at:------》应用运行位置: - Local: http://localhost:8080/------》- 本地: http://localhost:8080/ - Network: http://192.168.1.5:8080/-----》- 网络:http://192.168.1.5:8080/ Note that the development build is not optimized.------》请注意,开发版本未优化。 To create a production build, run npm run build.------》若要创建生产版本,请运行 npm 运行生成。 No issues found.------》未发现问题。 在本地用浏览器打开:http://localhost:8080 就可以看到刚才创建的基于Webpack的Vue.js项目欢迎页面,如图所示。 项目欢迎页面 三、Webpack下的Vue.js项目文件结构前面我们已经安装了Webpack、vue-cli并运行成功,看到了Vue.js的第一个页面。那么接下来我们对Webpack下的Vue.js有一个全面的了解。 我们进入Vue.js项目所在的vue3webpack目录,它的文件结构如下: 下面将针对重要的文件和文件夹依次进行说明。 打包之后的文件所在目录如下: vue3webpack项目(基于Webpack的Vue.js项目)│ │ ├── .git 目录 .gitignore Git上传时,需要忽略的文件。 │ ├── v │ ├── v │ └── v │ ├── node_modules 目录 (vue 项目的文件依赖存放在这个文件夹。) │ ├── 所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下。 │ ├── v │ └── v │ │ ├── public 目录:存放项目公共资源。如网站LOGO等,项目的主入口文件index.html。 │ │ 通常我们不需要对public文件夹内的资源做任何修改。 │ │ 后续在构建打包时,public内容会直接放到dist文件夹内plugins插件资源; │ ├── v │ ├── v │ └── v │ │ ├── src 目录 :存放 vue 项目的源代码。其下的各个文件(文件夹)分别为: │ ├── assets 目录 :资源文件,存放 css,图片等资源。 │ ├── component 目录 :组件文件夹,存放 vue 的公共组件(核心) │ │ (注册于全局,在整个项目中通过关键词便可直接输出)。 │ │ │ ├── router 目录 :用来存放 index.js,用来配置路由,定义各个页面对应的URL。 │ ├── store 目录 :组件文件夹,存放 vue 的公共组件 │ ├── views 目录:放主体页面,vue 文件是可以用来充当路由 view 的。 │ ├── tool:用来存放工具类 js, │ │ 将 js 代码封装好放入这个文件夹可以全局调用 │ │ (如api.js,http.js 是对 http 方法和 api 方法的封装)。 │ ├── main.js:是项目的入口文件,初始化 vue 实例,并引入所需要的插件。 │ ├── app.vue:是项目的主组件,所有页面都是在该组件下进行切换的。 │ ├── │ └── v │ │ ├── tests 目录 :单元测试 │ ├── v │ ├── v │ └── v │ ├── package.json 存放项目的依赖配置(比如 vuex,element-UI) ├── babel.config.js babel 转码器的配置文件。 ├── vue.config.js vue 的配置文件。 ├── yarn.lock 用来构建依赖关系树。 ├── └── node_modules文件夹,文件夹中往往会有几百个文件夹,Node项目所用到的第三方包特别多,也特别大。这些文件是由$ npm install命令产生的。所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下。src文件夹是核心源代码的所在目录,展开后如下所示(不同版本的vue-cli生成的目录会稍有不同,不过核心都是一样的),正常开发的时候一般只修改 src 文件夹下的文件。index.html:如果是一级页面模板的话,App.vue就是二级页面模板。所有的其他Vue.js页面都作为该模板的一部分被渲染出来。main.js:没有实际的业务逻辑,而是为了支撑整个Vue.js框架,作为程序的入口存在。dist —— 项目构建打包后的默认输出目录。本例中,package.json文件的内容如下: { "name": "vue3webpack", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" }, "devDependencies": { "@types/jest": "^27.0.1", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-plugin-unit-jest": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/eslint-config-typescript": "^9.1.0", "@vue/test-utils": "^2.0.0-0", "@vue/vue3-jest": "^27.0.0-alpha.1", "babel-jest": "^27.0.6", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "jest": "^27.0.5", "ts-jest": "^27.0.4", "typescript": "~4.5.5" } } 四、打开Vue项目管理器vue有个本地图形化管理器,基于vue/cli-ui。 vue/cli-ui 是 vue-cli 内置的一套成熟的 UI。 Vue-cli 的 3.x 版本由内到外完全重写,带来了许多新特性。你可以在你的项目中选用路由、Vuex 和 Typescript 等等特性,并为项目添加“vue-cli 插件”。不过,这么多的选项也意味着它更加复杂,难以上手。相比局限的命令行界面,一个成熟的 GUI 更能帮助你发掘这些新特性,搜索和安装 vue-cli 插件,解锁更多可能。 使用方式如下: (1) 第一步、创建 Vue 项目所在文件夹 (2) 第二步、同时按window+R键,输入cmd,打开命令提示符窗口,进入 Vue 项目所在目录 (3) 第三步、输入 vue ui 命令打开Vue 项目管理器 输入:vue ui 系统会自动打开 本地Vue 项目管理器的页面:http://localhost:8000/project/select 在这里,可以创建、导入、管理vue项目。 ![]() 推荐阅读: 30![]() SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例) 28![]() 查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决 27![]() 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(1) 26![]() 2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特 25![]() 2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载) 24![]() HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码) 23![]() 草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码 22![]() 【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码) 21![]() python爱心源代码集锦(18款) 20![]() 巴斯光年python turtle绘图__附源代码 19![]() Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 18![]() 草莓熊python turtle绘图代码(玫瑰花版)附源代码 17![]() 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 16![]() 皮卡丘python turtle海龟绘图(电力球版)附源代码 15![]() 【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向) 14![]() 草莓熊python turtle绘图(风车版)附源代码 13![]() 用代码过中秋,python海龟月饼你要不要尝一口? 12![]() 《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念 11![]() 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心) 10![]() Python函数方法实例详解全集(更新中...) 9![]() matplotlib 自带绘图样式效果展示速查(28种,全) 8![]() 手机屏幕坏了____怎么把里面的资料导出(18种方法) 7![]() 2023年3月TIOBE 指数头条:编程语言 Go 进入 TIOBE 指数前 10 名,多家权威机构____编程语言排行榜__薪酬状 6![]() Python中Print()函数的用法___实例详解(全,例多) 5![]() 色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名) 4![]() Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) 3![]() Tomcat 启动闪退问题解决集(八大类详细) 2![]() Tomcat端口配置(详细) 1![]() tomcat11、tomcat10 安装配置(Windows环境)(详细图文) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |